<template>
    <mi-form-page v-loading="edit.loading" @submit="submit">
        <el-form :model="edit.info"
                 ref="formRef"
                 :rules="rules"
        >

            <el-form-item prop="pid" label="上级">
                <mi-select-tree v-model="edit.info.pid" :options="parentOptions" />
            </el-form-item>

            <el-form-item prop="rule_type" label="规则类型">
                <mi-radio v-model="edit.info.rule_type" :options="[{id:1, title:'目录'},{id:2, title:'菜单'},{id:3, title:'权限'}]" />
            </el-form-item>

            <el-form-item prop="title" label="标题">
                <mi-input v-model="edit.info.title" />
            </el-form-item>

            <el-form-item prop="name" label="权限标识">
                <mi-input v-model="edit.info.name" />
            </el-form-item>

            <template v-if="edit.info.rule_type == 2">
                <el-form-item prop="route_path" label="前端路由">
                    <el-space fill>
                        <mi-input v-model="edit.info.route_path" />
                        <el-alert :closable="false">
                            前端路由必须以为“/”开头，如：/auth/admin
                        </el-alert>
                    </el-space>
                </el-form-item>

                <el-form-item prop="view_path" label="前端组件路径">
                    <el-space fill>
                        <mi-input v-model="edit.info.view_path" />
                        <el-alert :closable="false">
                            <p>
                                当前组件在views文件夹下的路径，必须以“/”开头，省略.vue后缀<br/>
                                如组件路径为 [root]/src/views/auth/admin.vue， 应写成 /auth/admin <br/>
                                如果不填写，默认取【前端路由】的值
                            </p>
                        </el-alert>
                    </el-space>

                </el-form-item>

                <el-form-item prop="route_name" label="前端路由名称">
                    <el-space fill>
                        <mi-input v-model="edit.info.route_name" />
                        <el-alert :closable="false">
                            <p>
                                前端路由名称配合前端组件名称可以实现页面缓存功能 <br/>
                                如果要缓存当前页面，前端路由的名称必须与前端组件名称一致<br/>
                                如果不填写，默认取【前端路由】的值
                            </p>
                        </el-alert>
                    </el-space>
                </el-form-item>
            </template>

            <el-form-item prop="icon" label="图标">
                <mi-input v-model="edit.info.icon" />
            </el-form-item>

            <el-form-item prop="sort" label="排序">
                <mi-input-number v-model="edit.info.sort" />
            </el-form-item>


            <el-form-item prop="status" label="状态">
                <mi-switch v-model="edit.info.status"  />
            </el-form-item>

            <el-form-item prop="toolbar" label="操作" v-if="edit.info.rule_type==2">
                <mi-checkbox v-model="edit.info.toolbar"
                             :options="[{id:'index', title:'列表'},
                                            {id: 'add',title: '添加'},
                                            {id: 'edit', title: '编辑'},
                                            {id: 'del', title: '删除'},]"
                />
            </el-form-item>

        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">

import {getCurrentInstance, onBeforeMount, ref} from "vue";
import {makeModelAuth} from "@/utils/auth";
import {FormInstance} from "element-plus";
import {simpleGet, simplePost} from "@/utils/request";
import Edit from "@/model/edit";
import List from "@/model/list";

const auth = makeModelAuth("site.siteUserRule")
const rules = {
    pid:[{required:true, message:'必填'}],
    title:[{required:true, message:'必填'}],
    name:[{required:true, message:'必填'}],
    rule_type:[{required:true, message:'必填'}],
}

const props = withDefaults(defineProps<{
    edit: Edit,
    list:List
}>(), {

})

const formRef = ref<FormInstance>()
const info :any = ref({})
const loading = ref(false)
const parentOptions = ref([]) as any

const { proxy } = getCurrentInstance() as any

const submit = () => {
    const url = `/${props.edit.info.id ? auth.edit: auth.add}`
    props.edit.submit({
        formRef:formRef.value,
        url: url,
        list:props.list
    })
}

const getParentOptions = async () => {
    const optionsRes = await simpleGet('/site.siteUserRule/options')
    //构建编辑页面的数据
    parentOptions.value = optionsRes.options
    parentOptions.value.unshift({id:0, level:0, title:'顶级'})
}


onBeforeMount(() => {
    props.edit.init(async () => {
        await getParentOptions()
        const id = props.edit.info.id
        if (id){
            // 请求表单数据
            let res = await simpleGet('/site.siteUserRule/edit', {id:id})
            props.edit.info = res.info
        }else{
            props.edit.info = {
                sort:1000,
                status:1,
            }
        }
    })
})

</script>

<style scoped>

</style>
